import React, {Component} from 'react'
import {
    Text,
    View,
    StyleSheet,
    Button,
    Image,
    FlatList,
    ScrollView,
    StyleProp,
    ViewStyle,
    TouchableOpacity
} from 'react-native'
import {default as styles, HUNDRED_PERCENT, margin, padding, rectWithSize} from "../../../../style/index";
import CertBtn from "../../../widget/CertBtn";
import {Actions} from "react-native-router-flux";
import {afterAnimation, defaultArr, defaultPage, getAssetUrl, keyExtractor, PromiseWrapper} from "../../../../util";
import {inject, observer} from "mobx-react/custom";
import {ActionTag, ProductStore} from "../../../../store/modules/main/product";
import {Store} from "../../../../store";
import {PageInterface, ProductModelInterface} from "../../../../net/instance/CommenModelInstance";
import FastImageCustom from "../../../widget/FastImageCustom";
import CommonFlatList from "../../../common/CommonFlatList";
import ProductListView from "../../productList/productListView";
import {number} from "prop-types";
import * as _ from 'lodash'

interface ProductSectionProps extends Store {

}

interface ProductSectionState {
    page: PageInterface,
    count: number,
    categoryId: number
}


@inject("product")
@observer
export default class ProductSection extends Component<ProductSectionProps, ProductSectionState> {
    state = {
        page: defaultPage,
        count: 0,
        categoryId: null
    };
    loadingPage = false;
    product: ProductStore;
    productListView: ProductListView;

    /***
     * 刷新
     * @param categoryId
     */
    refresh = async (categoryId: number) => {
        if (!this.loadingPage) {
            afterAnimation(async () => {
                this.setState({
                    page: defaultPage,
                    categoryId
                }, async () => {
                    this.loadingPage = true;
                    await this.product.getOrderListData(ActionTag.REFRESH, categoryId, this.state.page);
                    const {products, count} = this.product;
                    this.productListView.refreshComplete(products.length !== count);
                    this.loadingPage = false;
                });
            });
        }
    };


    constructor(props) {
        super(props);
        this.product = this.props.product;
    }


    /***
     * 当loadingPage为true时不能翻页，加载时不能翻页
     * 改方法是一个异步方法 必须等待state变化完后执行
     */
    changePage = async () => {
        if (!this.loadingPage) {
            this.loadingPage = true;
            const page = this.state.page;
            return PromiseWrapper((resolve) => {
                this.setState({
                    page: {
                        ...page,
                        pageNum: page.pageNum + 1
                    }
                }, () => resolve());
            })
        }
    };
    /***
     * loadingPage为true时不触发
     * 列表值为最大值时不触发
     * 触发后调用getOrderListData
     */
    loadMore = async () => {
        let {products, count} = this.product;
        if (products.length !== count && !this.loadingPage) {
            //翻页时会自动设置loadingPage为true
            await this.changePage();
            await this.product.getOrderListData(ActionTag.LOADMORE, this.state.categoryId, this.state.page);
            let {products, count} = this.product;
            this.productListView.loadMoreComplete(products.length !== count);
            this.loadingPage = false;
        }
    };

    listViewRefresh = ()=>{
        return this.refresh(this.state.categoryId);
    };

    render() {
        const {products, count} = this.product;
        return (
            <View>
                <View style={[margin(10), {backgroundColor: "#fff", borderRadius: 6}, padding(15, 10)]}>
                    <Text style={{fontSize: 16, fontWeight: "bold"}}>积分兑换</Text></View>
                <ProductListView count={count}
                                 loadMore={this.loadMore}
                                 products={products} refresh={this.listViewRefresh}
                                 ref={productListView => this.productListView = productListView}/>
            </View>
        )
    }
}


const ProductSectionStyles = StyleSheet.create({
    container: {},
    productRow: {
        flexDirection: "row",
        paddingHorizontal: 13,
        width: HUNDRED_PERCENT,

    }
});
